<template>
  <div class="mao-radio flex align-center pointer" @click.stop="toggle">
    <img
      v-if="!checked"
      src="@/assets/images/checkbox.png"
      alt=""
      class="icon"
    >
    <img v-else src="@/assets/images/checkbox-checked.png" alt="" class="icon">
    <slot />
  </div>
</template>
<script>
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    toggle() {
      this.$emit('change', !this.checked)
    }
  }
}
</script>
<style lang="scss" scoped>
.icon {
  width: 14px;
  height: 14px;
  margin-right: 10px;
}
.mao-radio {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.dark{
  .mao-radio{
    color: rgba(255,255,255,0.7);
  }
}
</style>
